<template>
  <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>
<script>
import * as echarts from "echarts";

const options = {
  grid: {
    top: 10,
    left: '2%',
    right: '2%',
    bottom: '2%',
    containLabel: true
  },
  xAxis: {
    data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']
  },
  yAxis: {},
  series: [
    {
      type: 'candlestick',
      data: [
        [20, 34, 10, 38],
        [40, 35, 30, 50],
        [31, 38, 33, 44],
        [38, 15, 5, 42]
      ]
    }
  ]
};
export default {
  props:{
    className: {
      type: String,
      default: 'chart'
    },
    config:{
      type: Object,
      default: ()=>{}
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    }
  },
  data(){
    return{
      options
    }
  },
  methods:{
    initChart(){
      let chart = echarts.init(document.getElementById(this.id))
      chart.setOption(this.options)
      return chart
    }
  },
  mounted(){
    this.$nextTick(()=>{
      let chart = this.initChart()
      window.addEventListener('resize',function (){
        chart&&chart.resize()
      })
    })
  }
}
</script>
